<template>
  <!-- 测试 -->
    <div class="login-container">
      <div class="login-card">
        <h2>登录</h2>
        <form @submit.prevent="handleLogin">
          <div class="input-group">
            <label for="username">用户名</label>
            <input type="text" v-model="username" id="username" required>
          </div>
          <div class="input-group">
            <label for="password">密码</label>
            <input type="password" v-model="password" id="password" required>
          </div>
          <button type="submit" @click="login">登录</button>
        </form>
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: 'zhangsan',
        password: '123456',
        errorMessage: ''
      };
    },
    methods: {
      login(){
        let basic = "Basic " + btoa("client:secret","utf8");
        let url = "/oauth/token?grant_type=password&username="+ this.username +"&password=" + this.password;
        this.$axios.post(url,{},{
          headers:{
            Authorization: basic
          }
        }).then(res => {
          if (res.data.code == 501) {
            this.$message.error('用户名或密码错误')
            return
          } else if(res.data.code == 705) {
            this.$message.error('账号已被锁定')
            return
          }
          this.$axios.get("/user/findById/" + res.data.uid).then(res => {
            if(res.data.code == 200){
              localStorage.setItem("user",JSON.stringify(res.data.data))
            }
          })
          this.$router.push({path: '/main'})
        })
      }
    }
  };
  </script>
  
  <style scoped>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to right, #4facfe, #00f2fe);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
  }
  
  .login-container {
    display: flex;
    justify-content: center;
    background: url('../../assets/22.jpg') no-repeat center center fixed;
    position: fixed;
    background-size: cover;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .login-card {
    background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 350px;
    width: 100%;
  }
  
  .login-card h2 {
    margin-bottom: 20px;
    color: #333;
  }
  
  .input-group {
    margin-bottom: 15px;
    text-align: left;
  }
  
  .input-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
  }
  
  .input-group input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
  }
  
  button {
    width: 100%;
    padding: 12px;
    background-color: #4facfe;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }
  
  button:hover {
    background-color: #00f2fe;
  }
  
  .error-message {
    color: red;
    margin-top: 10px;
  }
  </style>
  